<style type="text/css">
	div.tab-con{
		font-size:14px;
		color:#4F5356;
		text-align:center;
		margin:30px 50px 10px;
	}
	div.tab-con table.set-con{
		width:100%;
		border-collapse:collapse;
	}
	th.set-con-long{
		color:#FE8F19;
		width:30%;
	}
	th.set-con-short{
		color:#FE8F19;
		width:20%;
	}
	.boder-tr{
		border-bottom:2px solid #FF8000;
		height:30px;
	}
	span.handle-tip{
		display:inline-block;
		width:40px;
		height:30px;
		cursor:pointer;
	}
	.table-height{
		line-height:34px;
	}
	img.signal-bg{
		width: 22px;
		height:18px;
		margin-top:5px;
	}
	input.btn-left{
		width:140px;
	}
	input.btn-right{
		width:140px;
		background-color:#FE8F19;
	}
	div.fail-note{
		width:300px;
		margin:10px auto;
	}
	label.status-tip{
		display:inline-block;
		width:80px;
	}
	p.wisp-remark{
		width:300px;
		color:#767D82;
		font-size:14px;
	}
	span.wisp-tip{
		font-size:14px;
		margin-left:20px;
	}
	/*1080p适配*/
	@media screen and (min-device-width:1920px){
		div.tab-con{
			font-size:18px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			wisp = {config = {}}
		}

		local result = tpl_get_data(para, true)
	-%>
	var info = <%=result%>;
	var wisp = info[K_MODULE].wisp.config;

	var extendSwitch = wisp.enable;
	var extendBand = wisp.band;
	var extendMac = wisp.bssid;
	var extendSsid = wisp.ssid;
	var extendModetype = wisp.safe_mode;
	var extendPwdtype = wisp.encryption;
	var extendPwd = wisp.password;
	var wanProto = wisp.protocol;
	var wanIpaddr = wisp.ip;
	var wanGateway = wisp.gateway;

	$("#ExtendSsid").html(extendSsid);
	$("#ExtendSsidFail").html(extendSsid);
	$("#WanProto").html(wanProto);
	$("#WanIpaddr").html(wanIpaddr);
	$("#WanGateway").html(wanGateway);

	function onSwitchClick(state, init){
		if (0 == state){
			$("#Param").hide();
			if (!init){
				showConfirm(label.colseExtend, function(choose){
					if (choose){
						var data = {};
						var para = {};
						para.wisp = {};
						para.wisp.config = data;
						data.enable = "0";
						apiSet(para, function(ret){
							var code = ret[ERR_CODE];
							if (E_NONE == code){
								showProgressBar(label.svaeColseExtend, label.rebooting, ROUTER.time.reboot, function(){
									window.location.reload();
								});

								$.setTimeout(function(){
									// 检测LAN是否可以连接DUT
									lanDetecting(function(){
										window.location.reload();
									});
								}, ROUTER.time.detectDelay);
							}else{
								errHandle(code);
								closeLoading();
							}
						});
					}else{
						resetSwitch("Switch", !state);
						$("#Param").show();
						initRadio("WispModal", 0, radioClick);
					}
				});
			}
		}else{
			$("#Param").show();
			initRadio("WispModal", 0, radioClick);
			if (!init){
				$("#Param").show();
				initRadio("WispModal", 0, radioClick);
			}
		}
	}

	initSwitch("Switch", extendSwitch, onSwitchClick);

	function radioClick(idx){
		if (0 == idx){
			$("#AutoConfigure").show();
			$("#ApList").hide();
			$("#HandConfigure").hide();
			if ("0" == extendSwitch){
				$("#ExtendSuccess").hide();
				$("#ExtendFail").hide();
				$("#StartScan").show();
			}else{
				if ("" != wanIpaddr && "0.0.0.0" != wanIpaddr){
					$("#ExtendFail").hide();
					$("#StartScan").hide();
					$("#ExtendSuccess").show();
				}else{
					$("#ExtendSuccess").hide();
					$("#StartScan").hide();
					$("#ExtendFail").show();
				}
			}
		}else{
			$("#AutoConfigure").hide();
			$("#ApList").hide();
			$("#HandConfigure").show();
		}
		closeNote();
	}

	var curMode = 'OPEN';
	var modeList = [{name:"OPEN", value:"OPEN"},
						{name:"WPA-PSK", value:"WPA-PSK"},
						{name:"WPA2-PSK", value:"WPA2-PSK"}];

	initSelect("SafeMode", modeList, curMode, function(){
		var nowSelect = $("#SafeMode").attr("data-value");
		if ("OPEN" == nowSelect){
			$("#WifiPwd").hide();
			$("#WifiSafeType").hide();
		}else{
			$("#WifiPwd").show();
			$("#WifiSafeType").show();
		}
	});

	var curType = 'TKIP';
	var typeList = [{name:"TKIP", value:"TKIP"},
					{name:"AES", value:"AES"}];
	initSelect("SafeType", typeList, curType, function(val, init){});

	function sortByKey(array, key){
		return array.sort(function(a, b) {
			var x = a[key];
			var y = b[key];

			return ((x > y) ? -1 : ((x < y) ? 1 : 0));
		});
	}

	function apList(){
		var data = {
			wisp:{ap_list:null}
		};

		apiGet(data, function(result){
			var errNo = result[ERR_CODE];
			if (E_NONE == errNo){
				ret = result[K_MODULE];
				clients = ret.wisp.ap_list;

				var aplist = sortByKey(clients, 'signal');
				var len = aplist.length;

				for (var i = 0; i < len; i++){
					if (0 == clients[i].band) {
						$("#ApTab2G").append(initExtend(aplist[i], i));
					}else{
						$("#ApTab5G").append(initExtend(aplist[i], i));
					}
				}

				$(".connect-item").click(function(){
					var clientNum = $(this).attr("data-index");
					if (aplist[clientNum].safe_mode == "SHARED" || aplist[clientNum].safe_mode == "WEP"){
						showAlert(errStr.noSupportWifi);
						return false;
					}

					loadWidget("setExtend.htm", function(){
						if (aplist[clientNum].safe_mode == "OPEN"){
							$("#WispAutoPwd").addClass("invisible");
						}else{
							$("#WispAutoPwd").removeClass("invisible");
						}

						$("#WispBand").val(aplist[clientNum].band);
						$("#WispMac").val(aplist[clientNum].bssid);
						$("#SsidNameAuto").val(aplist[clientNum].ssid);
						$("#WispModeType").val(aplist[clientNum].safe_mode);
						$("#WispPwdType").val(aplist[clientNum].encryption);
					});
				});

				closeLoading();
			}else{
				console.log(result);
			}
		});
	}

	function initExtend(client, idx){
		var signalStreng = "";
		var wifiBand = "";
		var signal = Math.abs(client.signal);

		if (client.safe_mode == "OPEN"){
			if (signal < 25){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_1.png?_=20170809165512" />';
			}
			else if (signal < 50){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_2.png?_=20170809165512" />';
			}
			else if (signal < 75){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_3.png?_=20170809165512" />';
			}
			else{
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_4.png?_=20170809165512" />';
			}
		}else{
			if (signal < 25){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_1.png?_=20170809165512" />';
			}
			else if (signal < 50){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_2.png?_=20170809165512" />';
			}
			else if (signal < 75){
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_3.png?_=20170809165512" />';
			}
			else{
				signalStreng += '<img class="signal-bg" src="/luci-static/images/signal_lock_4.png?_=20170809165512" />';
			}
		}

		wifiBand += '<span class="handle-tip color-orange connect-item" data-index="' + idx +'">';

		return  '<tr class="table-height">' +
					'<td>' + client.ssid + '</td>' +
					'<td>' + client.bssid + '</td>' +
					'<td>' + signalStreng + '</td>' +
					'<td>' + wifiBand + btn.connect +  '</span>' +
					'</td>' +
				'</tr>';
	}

	$("#StartScanbtn").click(scanAplist);

	$("#reScanbtn").click(scanAplist);

	$("#ConfigureSave").click(scanAplist);

	$("#reConSave").click(scanAplist);

	function scanAplist(){
		$("div.err-note").hide();
		$("#ApTab2G  tr:not(:first)").html("");
		$("#ApTab5G  tr:not(:first)").html("");
		showLoading(label.scanAplist);
		$("#AutoConfigure").hide();
		$("#HandConfigure").hide();
		$("#ApList").show();
		apList();
	}

	$("#RetrySave").click(function(){
		var data = {};
		var para = {};
		para.wisp = {};
		para.wisp.config = data;
		data.enable = "1";
		data.band = extendBand;
		data.bssid = extendMac;
		data.ssid = extendSsid;
		data.safe_mode = extendModetype;
		data.encryption = extendPwdtype;
		data.password = extendPwd;
		showConfirm(label.openExtend, function(choose){
			if (choose){
				showLoading(label.saving);
				apiSet(para, function(ret){
					var code = ret[ERR_CODE];
					if (E_NONE == code){
						showProgressBar(label.saveOpenExtend, label.rebooting, ROUTER.time.reboot, function(){
							window.location.reload();
						});

						$.setTimeout(function(){
							// 检测LAN是否可以连接DUT
							lanDetecting(function(){
								window.location.reload();
							});
						}, ROUTER.time.detectDelay);
					}else{
						errHandle(code);
						closeLoading();
					}
				});
			}
		});
	});

	$("#ExtendSave").click(function(){
		var data = {};
		var para = {};
		para.wisp = {};
		para.wisp.config = data;
		data.enable = "1";
		data.band = "";
		data.bssid = "";
		data.ssid = $("#SsidName").val();
		data.password = $("#WispPwd").val();
		data.safe_mode = $("#SafeMode").attr("data-value");
		if ("OPEN" == $("#SafeMode").attr("data-value")){
			data.encryption = "NONE";
		}else{
			data.encryption = $("#SafeType").attr("data-value");
		}

		showConfirm(label.openExtend, function(choose){
			if (choose){
				showLoading(label.saving);
				apiSet(para, function(ret){
					var code = ret[ERR_CODE];
					if (E_NONE == code){
						showProgressBar(label.saveOpenExtend, label.rebooting, ROUTER.time.reboot, function(){
							window.location.reload();
						});

						$.setTimeout(function(){
							// 检测LAN是否可以连接DUT
							lanDetecting(function(){
								window.location.reload();
							});
						}, ROUTER.time.detectDelay);
					}else{
						closeLoading();
						errHandle(code);
					}
				});
			}
		});
	});

	function errHandle(code)
	{
		switch(code){
		case E_NONE:
			break;
		case E_WISPSSIDBLANK:
			showNote(errStr.ssidEmpty);
			break;
		case E_WISPSSIDLEN:
			showNote(errStr.ssidLength);
			break;
		case E_WISPSSIDILLEGAL:
			showNote(errStr.ssidInclSpeChar);
			break;
		case E_WISPPSKPWBLANK:
			showNote(errStr.wifiPwdEmpty);
			break;
		case E_WISPPSKPWLEN:
			showNote(errStr.wifiPwdLengthErr);
			break;
		case E_WISPPSKPWILLEGAL:
			showNote(errStr.ssidPwdInclSpeChar);
			break;
		case E_WISPNOTFOUND:
			showNote(errStr.wispNotFound);
			break;
		default:
			showNote(errStr.unknownErr + code);
			break;
		}

		return true;
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/wisp.png?_=20170809165512" />
			<span class="help-title">{%label.wisp%}</span>
		</li>
		<li class="summary">{%helpStr.wisp%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/wisp.png?_=20170809165512" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.wisp%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con set-con-switch">
		<p class="set-con-desc">
			<label class="tip-lbl">{%label.wisp%}</label>
			<span id="Switch" class="switch">
				<i class="switch-circle icon_select_off"></i>
			</span>
		</p>
	</ul>
	<div id="Param">
		<ul id="WispMode" class="set-con set-con-radio">
			<li class="set-con-radio">
				<label class="radio-title">{%label.connectType%}</label>
				<span id="WispModal" class="radio-group">
					<span class="radio uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.scanGet%}</label>
					</span>
					<span class="radio radio-r uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.handSet%}</label>
					</span>
				</span>
			</li>
		</ul>
		<div id="AutoConfigure" class="hidden">
			<div class="btn-con" id="StartScan">
				<input id="StartScanbtn" class="btn" type="button" value="{%btn.startScan%}" />
			</div>
			<div id="ExtendSuccess" class="hidden">
				<ul class="set-con set-con-switch">
					<p class="set-con-desc">
						<label class="tip-lbl status-tip">{%label.networkName%}</label>
						<span class="wisp-tip" id="ExtendSsid"></span>
					</p>
				</ul>
				<ul class="set-con set-con-switch">
					<p class="set-con-desc">
						<label class="tip-lbl status-tip">{%label.wanType%}</label>
						<span class="wisp-tip" id="WanProto"></span>
					</p>
				</ul>
				<ul class="set-con set-con-switch">
					<p class="set-con-desc">
						<label class="tip-lbl status-tip">{%label.ipaddr%}</label>
						<span class="wisp-tip" id="WanIpaddr"></span>
					</p>
				</ul>
				<ul class="set-con set-con-switch">
					<p class="set-con-desc">
						<label class="tip-lbl status-tip">{%label.gateway%}</label>
						<span class="wisp-tip" id="WanGateway"></span>
					</p>
				</ul>
				<div class="btn-con">
					<input id="ConfigureSave" class="btn" type="button" value="{%btn.reConfigure%}" />
				</div>
			</div>

			<div id="ExtendFail" class="hidden">
				<ul class="set-con set-con-switch">
					<p class="set-con-desc">
						<label class="tip-lbl status-tip">{%label.networkName%}</label>
						<span class="wisp-tip" id="ExtendSsidFail"></span>
					</p>
				</ul>
				<div class="fail-note">
					<p class="wisp-remark color-red">{%label.extendFail%}</p>
				</div>
				<div class="fail-note">
					<p class="wisp-remark">{%label.extendClose%}</p>
				</div>
				<div class="err-note hidden">
					<i class="err-icon icon_remind_line"></i>
					<p class="note-str"></p>
				</div>
				<div class="btn-con">
					<input id="reConSave" class="btn btn-left" type="button" value="{%btn.reConfigure%}" />
					<input id="RetrySave" class="btn btn-right" type="button" value="{%btn.retry%}" />
				</div>
			</div>
		</div>
		<div id="HandConfigure" class="hidden">
			<ul class="set-con">
				<li class="text-con">
					<label class="desc-lbl">{%label.networkName%}</label>
					<input id="SsidName" class="text hover" maxLength="32" value="" />
				</li>
			</ul>
			<ul class="set-con" id="WifiSafeMode">
				<li class="text-con">
					<label class="desc-lbl">{%label.safeMode%}</label>
					<span id="SafeMode" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con" id="WifiSafeType">
				<li class="text-con">
					<label class="desc-lbl">{%label.encryptionType%}</label>
					<span id="SafeType" class="select">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
			<ul class="set-con" id="WifiPwd">
				<li class="text-con">
					<label class="desc-lbl">{%label.networkPwd%}</label>
					<input id="WispPwd" class="text hover" type="password" maxLength="64" value="" /><i class="tip icon-eye" data-value="0"></i>
				</li>
			</ul>
			<div class="err-note hidden">
				<i class="err-icon icon_remind_line"></i>
				<p class="note-str"></p>
			</div>
			<div class="btn-con">
				<input id="ExtendSave" class="btn" type="button" value="{%btn.startExtend%}" />
			</div>
		</div>
		<div id="ApList" class="hidden">
			<div class="btn-con">
				<input id="reScanbtn" class="btn" type="button" value="{%btn.reScan%}" />
			</div>
			<div id="WISP2G" class="tab-con">
				<table  id="ApTab2G" class="set-con">
					<tr class="boder-tr">
						<th class="set-con-long">{%label.wifiName2G%}</th>
						<th class="set-con-long">{%label.macAddr%}</th>
						<th class="set-con-short">{%label.signalStreng%}</th>
						<th class="set-con-short">{%label.handle%}</th>
					</tr>
				</table>
			</div>
			<div id="WISP5G" class="tab-con">
				<table  id="ApTab5G" class="set-con">
					<tr class="boder-tr">
						<th class="set-con-long">{%label.wifiName5G%}</th>
						<th class="set-con-long">{%label.macAddr%}</th>
						<th class="set-con-short">{%label.signalStreng%}</th>
						<th class="set-con-short">{%label.handle%}</th>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>